<template>
  <div @click="toPlaylistPage"
       class="w-full h-20 grid grid-cols-12 grid-rows-1  justify-center items-center cursor-pointer hover:bg-primary/20">
    <div class="col-span-2 flex justify-center items-center text-2xl text-base-content/80 rounded-full">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
           class="w-6 h-6 rounded-full hover:btn-ghost">
        <path stroke-linecap="round" stroke-linejoin="round"
              d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
      </svg>
    </div>
    <div class="col-span-8 h-full flex flex-col justify-center items-start ml-2">
      <div>{{ props.playlist['name'] }}</div>
      <div>{{ props.playlist['remark'] }}</div>
    </div>
    <div class="col-span-2 flex justify-center items-center rounded-full" @click.stop>
      <label :for="'playlistBarConfig' + props.playlist.id">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-6 h-6 rounded-full hover:btn-ghost">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"/>
        </svg>
      </label>
      <!-- Put this part before </body> tag -->
      <input type="checkbox" :id="'playlistBarConfig' + props.playlist.id" class="modal-toggle"/>
      <div class="modal">
        <div class="modal-box relative">
          <label :for="'playlistBarConfig' + props.playlist.id"
                 class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
          <h3 class="text-lg font-bold divider">歌曲：{{ props.playlist.name }}</h3>
          <label :for="'edit'+ props.playlist.id"
                 :class="[{'hidden':isMyPlaylist == false},'flex flex-row justify-start items-center my-2 m-auto gap-2 max-w-xs btn btn-info']">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"/>
            </svg>
            <div>修改</div>
          </label>

          <label :for="'playlistBarConfig' + props.playlist.id"
                 @click="deletePlaylistFromFavorite()"
                 class="flex flex-row justify-start items-center my-2 m-auto gap-2 max-w-xs btn btn-error">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
            </svg>
            <div>删除</div>
          </label>
        </div>
        <!-- Put this part before </body> tag -->
        <input type="checkbox" :id="'edit'+ props.playlist.id" class="modal-toggle"/>
        <div class="modal">
          <div class="modal-box flex flex-col justify-center items-center gap-2">
            <h3 class="font-bold text-lg">修改歌单：{{ props.playlist?.name }}</h3>
            <div class="flex justify-start w-full max-w-xs">歌单名称</div>
            <input type="text" class="rounded-2xl w-full max-w-xs" v-model="playlistData.name">
            <div class="flex justify-start w-full max-w-xs">介绍</div>
            <input type="text" class="rounded-2xl w-full max-w-xs" v-model="playlistData.remark">
            <div class="join w-full max-w-xs flex justify-center items-center">
              <label @click="updatePlaylist()" :for="'edit'+ props.playlist.id" class="join-item btn btn-primary w-32"
                     type="radio">修改</label>
              <label :for="'edit'+ props.playlist.id" class="join-item btn w-32" type="radio">取消</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import router from "../plugins/router.ts";
import {hook_deleteFavoritePlaylistByUserId} from "../hook/FavoriteHook.ts";
import {hook_getUser} from "../hook/UserHook.ts";
import {hook_deletePlaylistById, hook_findPlaylistByIdAndUserId, hook_updatePlaylist} from "../hook/PlaylistHook.ts";
import {onMounted, ref} from "vue";
import {useToast} from "vue-toastification";

let props = defineProps<{
  playlist
  type: "favoritePlaylist" | "playlist"
}>()

let playlistData = ref({
  name: props.playlist.name,
  id: props.playlist.id,
  remark: props.playlist.remark,
});

let emits = defineEmits<{
  (e: 'deleteSuccess', type),
  (e: 'updateSuccess'),
}>()

let isMyPlaylist = ref(false);
onMounted(async () => {
  isMyPlaylist.value = await hook_findPlaylistByIdAndUserId(props.playlist?.['id'], hook_getUser()?.['id'])
})


async function deletePlaylistFromFavorite() {
  if (props.type == "favoritePlaylist") {
    await hook_deleteFavoritePlaylistByUserId(hook_getUser().id, props.playlist.id);
  } else if (props.type == "playlist") {
    console.log(props.playlist.id)
    await hook_deletePlaylistById(props.playlist.id)
  }
  console.log('发射通知');
  useToast().success("删除成功")
  emits('deleteSuccess', props.type)
}

function toPlaylistPage() {
  router.push("/playlist/" + props.playlist['id'])
}

function updatePlaylist() {
  hook_updatePlaylist(playlistData.value)
  console.log('发射通知');
  useToast().success("修改成功")
  emits('updateSuccess')
}

</script>

<style scoped>

</style>